<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画图标</title>
		<style type="text/css">
			.icon-qzone{
				width:25px;
				height: 25px;
				background-image: url(//mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/icons.png);
				background-position: 0 -100px;
				transition: all 0.5s;
			}
			.icon-qzone:hover{
				background-position: 0 -150px;
			}
			.icon-email{
				width:25px;
				height: 25px;
				background-image: url(//mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/icons.png);
				background-position: 2px -195px;
				transition: all 0.5s;
			}
			.icon-email:hover{
				background-position: 2px -245px;
			}
			.head{
				border:1px solid #eee;/*边框*/
				padding: 2px;/*内边距*/
				border-radius: 50%;/* 圆角 50% 纯圆*/
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="icon-qzone"></div>
		<div class="icon-email"></div>
		<img class="head" src="img/1553850248495.jpg"/>
	</body>
</html>
